<template>
  <div>
    <!--上方搜索框-->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <el-form-item>
        <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">删除</el-button>
      </el-form-item>
      <el-form-item label="订单号" prop="payId">
        <el-input size="small" clearable v-model="keyword.payId" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="付款人姓名" prop="supplierName">
        <el-input size="small" clearable v-model="keyword.supplierName" placeholder="付款人姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">
          重置
        </el-button>
        <!-- <el-button type="primary" plain size="small" @click="dialogExcelVisible = true" icon="el-icon-upload2">导入
        </el-button>
        <el-button type="primary" plain size="small" @click="downloadExcel" icon="el-icon-download">导出</el-button> -->
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="measureList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="付款单编号" align="center" prop="payId" />
      <el-table-column label="供应商公司" align="center" prop="supplierCompany" />
      <el-table-column label="供应商姓名" align="center" prop="supplierName" />
      <el-table-column label="产品名" align="center" prop="pname" />
      <el-table-column label="付款金额" align="center" prop="payMoney" />
      <el-table-column label="付款方式" align="center" prop="payType" />
      <el-table-column label="经办员工" align="center" prop="payEmployeeName" />
      <el-table-column label="付款状态" align="center" prop="finishFlag">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.finishFlag" type="success">完成</el-tag>
          <el-tag v-else type="danger">未完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="付款时间" align="center" prop="payTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="付款单编号" prop="payId">
          <el-input v-model="form.payId" readonly></el-input>
        </el-form-item>
        <el-form-item label="供应商公司" prop="supplierCompany">
          <el-input v-model="form.supplierCompany" readonly></el-input>
        </el-form-item>
        <el-form-item label="供应商姓名" prop="supplierName">
          <el-input v-model="form.supplierName" readonly></el-input>
        </el-form-item>
        <el-form-item label="产品名" prop="pname">
          <el-input v-model="form.pname" readonly></el-input>
        </el-form-item>
        <el-form-item label="付款金额" prop="payMoney">
          <el-input v-model="form.payMoney" readonly></el-input>
        </el-form-item>
        <el-form-item label="付款方式" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择付款方式">
            <el-option v-for="item in payTypeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款状态" prop="finishFlag">
          <el-select v-model="form.finishFlag" placeholder="请选择付款方式">
            <el-option label="未付款" value="0"></el-option>
            <el-option label="已付款" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经办人" prop="eId">
          <el-select v-model="form.eId" >
            <el-option v-for="item in empOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>


      </el-form>

      <div>
        <el-button type="primary" @click="submitDialog">提交</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>


    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>


import { getAll, deleteById, deleteByIds, getPoList, updateFinishFlag } from '@/api/pay';
import { getList } from '@/api/emp';
import { getEidOptions } from '@/api/pm';

export default {
  data() {
    return {
      measureList: [],
      dialogExcelVisible: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      currentPage: 1,
      keyword: {
        payId: '',
        supplierName: '',
        payType: '',
      },
      ids: [],
      dialogFormVisible: false,
      form: {
        id: "",
        payId: "",
        sId: "",
        supplierName: '',
        supplierCompany: '',
        pId: 0,
        pname: '',
        payMoney: "",
        typeId: 0,
        eId: 0,
        finishFlag: 0
      },
      empOptions: [],
      payTypeList: []

    }
  },
  methods: {
    // 打开修改对话框
    handleUpdate(row) {
      this.dialogFormVisible = true
      this.form = row
      getList().then(res => {
        console.log("员工返回信息",res)
        if (res.code == 200) {
          this.empOptions = res.data
        }
      })
      getEidOptions().then(res => {
        console.log("支付方式返回信息",res)
        if (res.code == 200) {
          this.payTypeList = res.data
        }
      })
    },
    submitDialog() {
      updateFinishFlag({
        id: this.form.id,
        typeId: this.form.typeId,
        eId: this.form.eId,
        finishFlag: this.form.finishFlag
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.selectPayListVO()
        }

      })
    },
    selectPayListVO() {
      this.loading = true
      getAll({
        payId: this.keyword.payId,
        supplierName: this.keyword.supplierName,
        payType: this.keyword.payType,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(response => {
        console.log("md line45:", response.data.list)
        this.measureList = response.data.list
        this.total = response.data.total
        this.currentPage = response.data.currentPage
        this.loading = false
      })
    },

    // 删除
    handleDelete(row) {
      console.log("line215", row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.selectPayListVO();
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })
      })
    },

    // 批量删除
    deleteBatch() {
      this.$confirm('此操作将永久删除' + this.ids.length + '条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //delBatch  刚才api/unit.js中一个axios方法
        deleteByIds(this.ids).then(response => {
          // console.log("md line 151:", response)
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          this.selectPayListVO()
        })
      })
    },


    handleSizeChange(val) {
      this.pageSize = val
      this.selectPayListVO()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.selectPayListVO()
    },
    search() {
      this.pageNum = 1
      this.selectPayListVO()
    },
    // 重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();//校验
      this.selectPayListVO()
    },

    //获取选中checkbox的框的id
    handleSelectionChange(selectionRowArr) {
      console.log("md line 147:", selectionRowArr)
      this.ids = [];
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].id)
      }
    },

    // 获取采购订单数据
    getPoData() {
      getPoList().then(response => {
        this.poOptions = response.data.map(item => ({
          value: item.poNum, // 使用 poNum 作为选项值
          label: `采购单 ${item.poNum}` // 显示格式
        }))

      })
    }

    //获取付款方式
    /* getPayTypeData() {
      getPayTypeLIst().then(response => {
        this.payOptions = response.data.map(item => ({
          value: item.id,
          label: item.payName
        }))
      })
    }, */

  },


  created() {
    this.selectPayListVO()
  }
}

</script>

<style lang="scss" scoped></style>